<template>
  <div>
    <!-- 二级路由占位符 -->
    <router-view />

    <div style="height: 50px"></div>

    <van-tabbar v-model="active">
      <van-tabbar-item replace to="/home/indexV" @click="activeA"> 
        首页
        <template #icon="props">
          <img v-show="!props.active" src="../assets/tabs/index_0.png" alt="" />
          <img v-show="props.active" src="../assets/tabs/index_1.png" alt="" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/home/find" @click="activeB">
        发现
        <template #icon="props">
          <img v-show="!props.active" src="../assets/tabs/find_0.png" alt="" />
          <img v-show="props.active" src="../assets/tabs/find_1.png" alt="" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/home/plan" @click="activeC">
        计划
        <template #icon="props">
          <img v-show="props.active" src="../assets/tabs/plan_1.png" alt="" />
          <img v-show="!props.active" src="../assets/tabs/plan_0.png" alt="" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/home/team" @click="activeD">
        团队
        <template #icon="props">
          <img v-show="props.active" src="../assets/tabs/team_1.png" alt="" />
          <img v-show="!props.active" src="../assets/tabs/team_0.png" alt="" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/home/my" @click="activeE">
        我的
        <template #icon="props">
          <img v-show="props.active" src="../assets/tabs/me_1.png" alt="" />
          <img v-show="!props.active" src="../assets/tabs/me_0.png" alt="" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import storage from "@/utils/Storage";
export default {
  data() {
    return {
      active: storage.get("active") ? storage.get("active") : 0,
    };
  },

  

  methods: {
    activeA() {
      storage.set("active", 0);
    },
    activeB() {
      storage.set("active", 1);
    },
    activeC() {
      storage.set("active", 2);
    },
    activeD() {
      storage.set("active", 3);
    },
    activeE() {
      storage.set("active", 4);
    },
  },
};
</script>

<style scoped lang="scss">
.van-tabbar-item--active {
  color: #a727d9;
}
</style>
